<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="role-span">学员详情</span>
          <div id="opt" style="float: right">
            <el-button-group>
              <el-button type="plain" icon="el-icon-refresh-right" size="small" @click="handleRecharge">续费</el-button>
              <el-button type="plain" icon="el-icon-s-release" size="small" @click="handleRefund">退费</el-button>
            </el-button-group>
            <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit">编辑</el-button>
          </div>
        </div>

        <el-form ref="viewForm" :model="viewForm" label-width="100px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名:" prop="name">{{ viewForm.name }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别:" prop="gender">{{ viewForm.genderTxt }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="就读学校:" prop="name">{{ viewForm.school }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="生日:" prop="birth">
                <el-date-picker v-model="viewForm.birth" type="date" placeholder="选择日期" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报名日期:" prop="signDate">
                <el-date-picker v-model="viewForm.signDate" type="date" placeholder="选择日期" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前年级:" prop="gradeTxt">{{ viewForm.gradeTxt }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>

    <el-card class="box-card" shadow="never" style="margin-top:24px">
      <el-tabs v-model="activeName" @tab-click="handleTabChange">
        <el-tab-pane label="就读课程" name="first">
          <student-class :class-info-list="viewForm.classInfoList" @onQuitSuccess="onQuitSuccess"/>
        </el-tab-pane>
        <el-tab-pane label="学员课表" name="second">
          <schedule-calendar
            v-if="events && events.length>0"
            :events="events"
            :dateItemRender="itemRender"
            style="height: 1000px"
            @event-dragend="changeDate"/>
          <p v-if="events == null" style="padding: 20px; text-align: center;">无课程信息</p>
        </el-tab-pane>
        <el-tab-pane label="家长信息" name="third">
          <el-card>
            <div v-for="(value, key) in guardianInfoKeys" :key="key" class="basic-info-item">
              <span class="column-name">{{ value }}</span>
              <span>{{ convertGuardianKey(key) }} </span>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="上课记录" name="records">
          <component :student-id="this.$route.params.id" :is="feedbackComp"/>
        </el-tab-pane>
        <el-tab-pane label="账户信息" name="account">
          <component :student-id="this.$route.params.id" :is="accountComp"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <edit ref="form" :student="viewForm"/>

    <recharge-dialog ref="rechargeDlg"
      :merchant-student-id="merchantStudentId"
      :student-name="studentName"/>

    <!-- 退课对话框 -->
    <refund ref="refundForm" :merchantStudentId="merchantStudentId" :name="studentName"/>
    <!-- 修改课表 -->
    <change-schedule ref="changeScheduleDlg" @scheduleChanged="scheduleChanged"/>
  </div>
</template>

<script>
import { getStudentInfo, getStudentSchedule, getStudentGuardian } from '@/api/student'
import edit from './module/edit'
import refund from './module/refund'
import RechargeDialog from './module/recharge'
import studentClass from '../../components/students/student-course'
import scheduleCalendar from '@/components/schedule-calendar/index'
import changeSchedule from '@/components/schedule/change-schedule'
import dayjs from 'dayjs'

// 异步化处理的组件
const feedbackComponent = resolve => require(['../../components/students/student-feedback'], resolve)
const accountComponent = resolve => require(['../../components/students/student-account'], resolve)

export default {
  components: { edit, refund, RechargeDialog, studentClass, scheduleCalendar, changeSchedule },
  data() {
    return {
      merchantStudentId: 0,
      studentName: '',
      viewForm: {},
      activeName: 'first',
      guardianInfoKeys: {
        customerName: '客户姓名',
        mobile: '联系电话',
        wechat: '微信',
        qq: 'QQ',
        email: 'email',
        address: '家庭住址',
        source: '客户来源',
        comment: '备注',
        createdAt: '注册时间'
      },
      guardianInfo: {},
      events: [],
      feedbackInfoList: [],
      rechargeVisiable: false,
      // 两个异步组件
      feedbackComp: {},
      accountComp: {}
    }
  },
  created() {
    const now = new Date()
    this.events = this.events.map(item => {
      const d = item.date.split('-')[2]
      item.date = `${now.getFullYear()} - ${now.getMonth() + 1}-${d}`
      return item
    })
  },
  methods: {
    getStudentInfo() {
      let para = {
        studentId: this.$route.params.id
      }
      getStudentInfo(para).then(res => {
        this.viewForm = res.data
      })
    },
    itemRender(item) {
      const h = this.$createElement
      return h('span', {
        on: {
          click: () => {
            this.startChangeschedule(item.scheduleId)
          }
        }
      }, item.timeRange + ' ' + item.courseName)
    },
    // 学员课表不允许调课
    startChangeschedule(id) {
      // this.$refs.changeScheduleDlg.scheduleId = id
      // this.$refs.changeScheduleDlg.visible = true
    },
    // 调课拖拽按钮
    scheduleChanged(payload) {
      console.log('接收到调课成功事件！')
    },
    convertGuardianKey(key) {
      this.guardianInfo['createdAt'] = dayjs(this.guardianInfo['createdAt']).format('YYYY-MM-DD')
      return this.guardianInfo[key]
    },
    changeDate(e, item, date) {
      const updateIndex = this.events.findIndex(ele => ele.id === item.id)
      this.$set(this.events, updateIndex, {
        ...this.events[updateIndex],
        date
      })
    },
    handleTabChange(tab, event) {
      if(tab.name === 'third' && !this.guardianInfo.customerName) {
        this.getStudentGuardian()
      } else if(tab.name === 'records') {
        this.feedbackComp = feedbackComponent
      } else if(tab.name === 'account') {
        this.accountComp = accountComponent
      }
    },
    async getSchedule() {
      await getStudentSchedule({
        merchantStudentId: this.$route.params.id
      }).then(res => {
        this.events = res.data
      })
    },
    getStudentGuardian() {
      getStudentGuardian({
        merchantStudentId: this.$route.params.id
      }).then(res => {
        this.guardianInfo = res.data
      })
    },
    handleRefund: function() {
      this.merchantStudentId = this.viewForm.merchantStudentId,
      this.studentName = this.viewForm.name,
      this.$refs.refundForm.dialog = true
    },
    handleEdit: function() {
      this.$refs.form.dialog = true
    },
    handleRecharge: function() {
      this.merchantStudentId = this.viewForm.merchantStudentId,
      this.studentName = this.viewForm.name,
      this.$refs.rechargeDlg.visible = true
    },
    onQuitSuccess() {
      this.getStudentInfo()
    }
  },
  mounted() {
    this.getStudentInfo()
    this.getSchedule()
  }
}
</script>

<style lang="scss">

</style>
